// ---------- FEATURES-BLOCK ----------
.features {


  // ---------- FEATURES-TITLE
  .features__title {
    display: flex;
    flex-flow: column wrap;
    height: 112px;
    justify-content: space-evenly;
    margin-bottom: 70px;

    img {
      max-width: 70px;
      max-height: 69px;
      height: 69px;
    }


    // ---------- features-TITLE

    .common-title-m {
      font-weight: 800;
      line-height: 45px;
    }

    .common-text-s-b {
      font-size: 24px;
      line-height: 29px;
    }
  }

  // ---------- FEATURES-QUESTION
  .features__question {
    margin-top: 100px;
    background-color: $brand-grey;
    border-radius: 10px;
    height: 150px;

    .question-block {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: auto;

      &__img {
        min-width: 144px;

        img {
          margin-top: -60px;
          min-width: 186px;
          min-height: 144px;
        }
      }

      &__texts {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 60px;

        .common-title-m {
          color: #FFFFFF;
          font-weight: 700;
          font-size: 24px;
          line-height: 30px;
        }

        .common-text-s-w {
          font-weight: 500;
          font-size: 16px;
          line-height: 19px;
        }

        span {
          color: $brand-yellow;
        }
      }

      &__social-buttons {
        img {
          margin: 0 5px;
        }
      }
    }
  }


  // ---------- FEATURES-MEDIA ----------
}

@media (max-width: 1100px) {
  .features {
    &__title {

      .common-title-m {
        br {
          display: block;
        }
      }

      .common-text-s-b {
        width: 90%;
        height: auto;
      }
    }

  }
}

@media (max-width: 1020px) {
  .features {
    &__question {
      .question-block {
        display: flex;
        height: 100%;
        width: 100%;
        flex-flow: row wrap;

        &__img {
          width: 20%;
          min-width: 180px;

          img {
            width: 100%;
            height: auto;
          }
        }

        &__texts {
          width: 40%;
        }

        &__social-buttons {
          width: 18%;
          min-width: 117px;

          img {
            min-width: 26px;
            width: 22%;
            height: auto;
          }
        }

      }
    }
  }
}

@media (max-width: 900px) and (min-width: 450px) {
  .features {
    .features__title {
      display: flex;
      flex-flow: row wrap;
      justify-content: start;

      img {
        margin: 15px 15px 15px 0;
      }

      .common-text-s-b {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        height: 50%;
        width: 90%;
      }

      .common-title-m {
        width: 80%;
        font-weight: 800;
        margin: auto 0;
      }
    }
  }
}

@media (max-width: 850px) {
  .features {

    .features__question {
      height: 274px;

      .question-block {
        flex-direction: column;
        align-items: start;
        justify-content: space-between;

        &__img {
          padding: 0 15px;
        }

        &__texts {
          padding: 0 15px;
          text-align: left;
          width: 100%;

          .common-text-s-w {
            display: flex;
          }
        }

        &__social-buttons {
          padding: 15px 15px;
          width: 160px;
        }
      }
    }
  }
}

@media (max-width: 650px) {
  .features {
    height: auto;

    &__title {


      .common-text-s-b {
        height: auto;
        width: auto;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
      }

      .common-title-m {
        height: auto;
        width: 80%;
        font-size: 22px;
      }
    }

    &__question {
      margin-top: 50px;
    }
  }
}

@media (max-width: 450px) {
  .features {
    height: 450px;

    .features__title {
      display: flex;
      flex-flow: row wrap;
      justify-content: start;

      img {
        margin: 15px 15px;
      }

      .common-text-s-b {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        height: 50%;
        width: 100%;
        text-align: center;
      }

      .common-title-m {
        width: 70%;
        margin: auto 0;
        font-size: 19px;
        font-weight: 800;
        line-height: 25px;
      }
    }
  }
}